/**
 * Created by Administrator on 2017/11/29 0029.
 */
import React,{Component} from 'react';
import {connect} from 'react-redux';
import { hashHistory } from 'react-router';
import cookie from 'react-cookie';
import {Dialog} from 'react-weui'
import HeaderBar from '../../components/headerNav/headBar';

import './index.css';
import {port} from "../../public/index";
import enrollImg from '../../img/card/back.png'
import location from '../../img/icon/location.svg'
import safe from '../../img/icon/safe.svg'
import time from '../../img/icon/time.svg';
import whitePhone from '../../img/icon/phone-white.svg';
import { timestampFormat } from '../../public/index'
import {getAppointmentDetail} from '../../actions/enrollAction'
import {toFixed} from '../../public/index'

class Appointment extends Component{
    constructor(props){
        super(props);
        this.state = {
            maxPic:'',
            minPic:'',
            address:'',
            phone:'',
            title:'',
            subtitle:'',
            detail:'',
            limit:'',
            starttime:'',
            endTime:'',
            sSkuModels:[],
            showDialog:false,
            errorStr:'',
            style2: {
                title: '提示',
                buttons: [
                    {
                        type: 'default',
                        label: '知道了',
                        onClick: ()=>{this.showDialog(false)}
                    },
                    {
                        type: 'primary',
                        label: '去绑卡',
                        onClick: ()=>{this.showDialog(false);}
                    }
                ]
            },
            height:''
        }
    }

    componentDidMount(){
        try{
            let token = window.getNativeAppToken();
            if(window.isNativeApp()){
                cookie.save('userId',token)
            }
        }catch (e){

        }

        try{
            let token = window.handler.getNativeAppToken();
            if(window.handler.isNativeApp()){
                cookie.save('userId',token)
            }
        }catch (e){

        }

        let enrollImg=document.getElementsByClassName('enrollImg');
        let width=document.documentElement.clientWidth;
        let height=width*3/4;
        this.setState({
            height:height
        })
    }

    componentWillMount(){
        this.getAppointmentDetail(this.props.location.query.id)
    }

    showDialog(isShow){
        this.setState({
            showDialog:isShow
        })
    }

    getPriceMaxorMin(arr){
        let newArr=new Array();
        for(var i=0;i<arr.length;i++){
            if(arr[i].price!='undefined'){
                newArr.push(parseInt(arr[i].price))
            }
        }
        // 升序比较器
        function compare(a,b){
            return a-b
        }


        newArr.sort(compare)
        console.log('arr1 is'+newArr)
        let priceList=String(newArr).split(',')
        console.log(newArr)
        this.setState({
            price1:priceList[0],
            price2:priceList[priceList.length-1],
        })
    }




    getAppointmentDetail(id){
        fetch( port + '/card/subscribe/'+id)
            .then(res => {
                console.log(res.status)
                return res.json()
            })
            .then(data => {
                console.log('getAppointmentDetail')
                console.log(data.data)
                return data.data

            })
            .then(json=>{
                this.setState({
                    id:json.id,
                    maxPic:json.maxPic,
                    minPic:json.minPic,
                    address:json.address,
                    phone:json.phone,
                    title:json.title,
                    subtitle:json.subtitle,
                    detail:json.detail,
                    limit:json.limit,
                    starttime:json.startTime,
                    endTime:json.endTime,
                    price:json.sSkuModels[0].price,
                    sSkuModels:json.sSkuModels,
                    mustSelect:json.mustSelect,
                    detail:json.detail
                })
                cookie.save('sSkuModels',json.sSkuModels)
                cookie.save('remark',json.remark)
                this.getPriceMaxorMin(json.sSkuModels)
            })
            .catch(e =>{
                console.log(e)
            })
    }

    render(){
        return(
            <div >

                <Dialog title={this.state.style2.title} buttons={this.state.style2.buttons} show={this.state.showDialog}>
                    {this.state.errorStr}
                </Dialog>
                <div className="appoinmentContent">
                    <div className="enrollImg" style={{height:this.state.height}}>
                        <img src={this.state.maxPic} alt=""/>
                    </div>
                    <div className="enrollContent">
                        <div>
                            <h3>{this.state.title}</h3>
                            <h4>{this.state.subtitle}</h4>
                        </div>
                        <div>
                            <ul className="enrollInfo">
                                <li>
                                    <div>
                                    <span>
                                        <img src={location} alt=""/>
                                    </span>
                                        <span>商家地址</span>
                                        <input type="text" value={this.state.address} readOnly/>
                                    </div>
                                </li>
                                <li>
                                    <div>
                                    <span>
                                        <img src={time} alt=""/>
                                    </span>
                                        <span>活动时间</span>
                                        <input type="text" value={timestampFormat(new Date(this.state.starttime),2)+'-'+
                                        timestampFormat(new Date(this.state.endTime),2)
                                        } readOnly/>
                                    </div>
                                </li>
                                {/*<li>*/}
                                {/*<div>*/}
                                {/*<span>*/}
                                {/*<img src={people} alt=""/>*/}
                                {/*</span>*/}
                                {/*<span>人数</span>*/}
                                {/*<input type="text" value={this.state.limit} readOnly/>*/}
                                {/*</div>*/}
                                {/*</li>*/}
                                <li>
                                    <div>
                                    <span>
                                        <img src={safe} alt=""/>
                                    </span>
                                        <span>保障</span>
                                        <input type="text" value={'未服务全额退、过期包退'} readOnly/>
                                    </div>
                                </li>

                                <li>
                                    <div>
                                    <span>
                                        <img src={whitePhone} alt=""/>
                                    </span>
                                        <span>咨询电话</span>
                                        <input type="text" value={this.state.phone} readOnly/>
                                    </div>
                                </li>
                            </ul>
                        </div>
                        <div className="enrollDetail" style={{marginTop:20}} dangerouslySetInnerHTML={{__html:this.state.detail}}>
                        </div>
                    </div>
                </div>


                <div className="footBox">
                    <div>
                       价格:
                        <span>
                            ¥ <i>{parseInt(this.state.price1).toFixed(2)}</i>
                            ~<i>{parseInt(this.state.price2).toFixed(2)}</i>
                        </span>
                    </div>
                    <div onClick={() => {
                        window.sessionStorage.removeItem("data");
                        window.sessionStorage.removeItem("selectList");
                        window.sessionStorage.removeItem("sex");
                        hashHistory.push({
                            pathname: '/enrollForm',
                            query: {
                                id:this.state.id,
                                title: this.state.title,
                                subtitle:this.state.subtitle,
                                minPic:this.state.minPic,
                                sSkuModels:this.state.sSkuModels,
                                mustSelect:this.state.mustSelect
                            }
                        })
                        console.log('sSkuModels')
                        console.log(this.state.sSkuModels)
                    }
                    }>
                        立即预约
                    </div>
                </div>
            </div>
        )
    }
}

function mapStateToProps(state) {
    return{

    }
}

export default connect(
    mapStateToProps,{getAppointmentDetail}
)(Appointment)